<template>
	<view>
		<view v-if="(graphicList ? graphicList.data : []).length">
			<block v-for="(item, index) in (graphicList ? graphicList.data : [])" :key="item.id">
				<graphic-item
				@likeFun="likeFun"
				class="graphic-item" :graphic="item" 
				:pageIndex="pageIndex"
				:dataIndex="index"
				@contentClick="toDetaile" 
				@clickVideo="clickVideo"
				@clickAvatr="clickAvatr"
				@forwardFun="forwardFun"
				@clickInput="clickInput"
				@clickComment="clickComment"
				@clickAttention="clickAttention"
				ref="graphicItem"/>
			</block>
		</view>
		<view class="graphic-list-content" v-if="graphicList && graphicList.data.length == 0">
			<view class="content-none flex-ali-center flex-juscon-center" :style="{'height': noneWrap + 'px'}">
				<view class="none-hit">
					<image class="content-none-img" src="../../static/imgs/none.png" mode="widthFix"/>
					<view class="content-none-text">好像被外星人掳走了~</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import GraphicItem  from "@/components/funScrollView/Graphic-item.vue";
	export default {
		data() {
			return {
				noneWrap: 500,
				commentsContent:''
			};
		},
		props:{
			graphicList:{
				type:Object,
				default:function(){
					return {}
				}
			},
			pageIndex:{
				type:Number,
				default:0
			}
		},
		created() {
			let res = uni.getSystemInfoSync();
			this.noneWrap = res.windowHeight - uni.upx2px(100)
		},
		components:{
			GraphicItem
		},
		methods:{
			toDetaile(e){
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id,scrollIndex:this.pageIndex })
					}
				})
			},
			clickVideo(e){
				uni.$on("getVideoInfo",c=>{
					c.fun(e)
				})
				uni.navigateTo({
					url:'../../pages/detailVideo/detailVideo',
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { graphic: e })
					}
				})
			},
			clickAvatr(e){
				uni.navigateTo({
					url:"../../pages/funFriendDetaile/funFriendDetaile"
				})
			},
			likeFun(e){
				this.$emit("likeFun",e)
			},
			forwardFun(id){
				this.$emit("forwardFun",id)
			},
			clickInput(e){
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id,scrollIndex:this.pageIndex })
					}
				})
				this.$emit("clickInput",{...e})
			},
			clickComment(e){
				uni.navigateTo({
					url:'../../pages/funDetaile/funDetaile',
					success: res => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: e.id,scrollIndex:this.pageIndex })
					}
				})
				this.$emit("clickComment",{...e})
			},
			clickAttention(uid){
				this.$emit('clickAttention',uid)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.graphic-item{
		margin-top: 10rpx;
	}
	.graphic-list-content{
		
		.content-none{
			width: 100vw;
			.none-hit{
				margin-top: -100rpx;
				.content-none-img{
					width: 400rpx;
				}
				.content-none-text{
					text-align: center;
					color: #999999;
					font-size: 14rpx;
				}
			}
		}
	}
</style>
